<template>
  <div class="vip">
    <header-title>VIP会员</header-title>
    <div class="vip-header">
      <div class="vip-top">
        <div class="top-left">
          <img src="../assets/huiyuan.png" alt />
        </div>
        <div class="top-right">
          <h2>成为SVIP会员</h2>
          <p>告别盲目刷题，专家助你拿证</p>
        </div>
      </div>
      <div class="vip-bottom">
        <h2>会员套餐</h2>
      </div>
    </div>
    <div class="choose">
      <div class="box active">
        <div class="box-left">
          <h2>SVIP科一+科四</h2>
          <p>有效期8个月,尊享科—科四会员权益</p>
        </div>
        <div class="box-right">
          <h2>
            <span>￥</span>88
          </h2>
          <p>原价￥188</p>
        </div>
      </div>

      <div class="box">
        <div class="box-left">
          <h2>VIP科一+科四</h2>
          <p>有效期6个月,尊享科一科四会员权益</p>
        </div>
        <div class="box-right">
          <h2>
            <span>￥</span>80
          </h2>
          <p>原价￥160</p>
        </div>
      </div>

      <div class="box">
        <div class="box-left">
          <h2>SVIP科二+科三</h2>
          <p>有效期6个月,尊享科二科三会员权益</p>
        </div>
        <div class="box-right">
          <h2>
            <span>￥</span>30
          </h2>
          <p>原价￥68</p>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-top">
        <div>
          <h4>￥88/开通轻松过</h4>
          <button>立即开通</button>
        </div>
      </div>
      <p>
        <input type="checkbox" />
        购买及同意
        <span>《会员协议》</span>
      </p>
    </div>
  </div>
</template>
<script>
import HeaderTitle from "../components/HeaderTitle.vue";

export default {
  name: "Vip",
  components: { HeaderTitle },
 
};
</script>
<style lang="scss" scoped>
.vip {
  width: 100%;
  .vip-header {
    width: 100%;
    height: 250px;
    background-color: #252531;
    .vip-top {
      width: 100%;
      height: 180px;
      background-color: #303147;
      display: flex;
      align-items: center;
      .top-left {
        flex-grow: 1;
        width: 20%;
        height: 100%;
        line-height: 180px;
        text-align: center;
        img {
          width: 60px;
          height: 60px;
          vertical-align: middle;
        }
      }
      .top-right {
        flex-basis: 80%;
        color: #c59b6b;
        line-height: 175%;
        h2 {
          font-size: 26px;
          letter-spacing: 5px;
        }
        p {
          font-size: 16px;
          letter-spacing: 2px;
        }
      }
    }
    .vip-bottom {
      width: 100%;
      height: 70px;
      line-height: 70px;
      h2 {
        padding-left: 15px;
        color: #fff;
      }
    }
  }
  .choose {
    width: 100%;
    padding-bottom: 150px;
    background-color: #ffdbb8;
    padding-top: 20px;
    .box {
      width: 95%;
      height: 120px;
      background-color: #ffead3;
      margin: 0 auto;
      border-radius: 10px;
      display: flex;
      line-height: 250%;
      color: #ff6314;
      margin-top: 20px;
      .box-left {
        flex-basis: 70%;
        height: 100%;
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      h2 {
        font-size: 26px;
        span {
          font-size: 16px;
        }
      }
      p {
        font-size: 14px;
      }
      .box-right {
        flex-basis: 30%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        p {
          text-decoration: line-through;
        }
      }
      &.active {
        background-color: #4087ff;
        color: #fff;
      }
    }
  }
  .bottom {
    width: 100%;
    height: 120px;
    background-color: #faecd9;
    position: fixed;
    bottom: 0;
    left: 0;
    .bottom-top {
      width: 100%;
      height: 80px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      > div {
        width: 90%;
        height: 60px;
        background-image: linear-gradient(to right, #ff9566, #ff7564);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        border-radius: 30px;
        align-items: center;
        h4 {
          font-size: 22px;
          color: #fff;
          letter-spacing: 1px;
          margin-left: 10px;
        }
        button {
          width: 100px;
          height: 40px;
          border-radius: 20px;
          border: 0;
          background-image: linear-gradient(to right, #fcefbb, #ff9566);
          margin-right: 15px;
          color: #ff3333;
        }
      }
    }
    p {
      width: 100%;
      height: 40px;
      line-height: 40px;
      margin-left: 20px;
      font-size: 18px;
      span {
        color: #0504ee;
      }
    }
  }
}
</style>